<template>
  <div class="limit-home">
    <div class="limit-search">
      <el-form label-width="120px" size="small" label-position="left" @submit.native.prevent>
        <el-row :gutter="50">
          <el-col :span="20">
            <el-input
              class="full-width"
              v-model="searchParams.enterpriseName"
              @keyup.enter.native="getTableData('')"
              placeholder="请输入关键字">
              <template slot="append">
                <el-button type="primary"  size="mini" style="color:#fff;background:#409EFF!important;" @click="getTableData('')">查询</el-button>
              </template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <div style="display: flex;justify-content: flex-end;">
              <el-button type="primary" size="mini" @click="toInfo('')">新建</el-button>
            </div>
          </el-col>
          <div v-if="showAll">
          <el-col :span="8">
            <el-form-item label="组织名称">
              <el-input
                class="full-width"
                v-model="searchParams.enterpriseName"
                placeholder="请输入组织名称"> </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="组织类型">
              <el-select v-model="searchParams.enterpriseType" clearable>
                <el-option v-for="item in organizeList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="searchParams.status" clearable>
                <el-option v-for="item in statusList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="display: flex;justify-content: flex-end;">
              <el-button type="primary" size="mini" @click="getTableData('')">查询</el-button>
            </div>
          </el-col>
        </div>
        </el-row>
      </el-form>
      <div @click="clickMore" class="more-serach" >{{downTitle}}<i :class="{'el-icon-caret-bottom':!showAll,'el-icon-caret-top':showAll}"></i></div>
    </div>
    <div style="margin:0 20px;">
      <el-table :border="true" :data="tableData" style="width: 100%;" :header-cell-style="headCellStyle" :cell-style="cellStyle">
        <el-table-column label="组织名称" align="left" prop="enterpriseName"></el-table-column>
        <el-table-column label="说明" align="center" prop="enterpriseDesc" ></el-table-column>
        <el-table-column label="组织类型" align="center" prop="" width="140">
          <template slot-scope="scope">
              <span v-if="scope.row.enterpriseType == 1">企业</span>
              <span v-if="scope.row.enterpriseType == 2">团队</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="140">
          <template slot-scope="scope">
              <span v-if="scope.row.status == 1">已开通</span>
              <span v-if="scope.row.status == 5">草稿</span>
              <span v-if="scope.row.status == 3">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template slot-scope="scope">
              <el-button size="medium" type="text" @click="toInfo(scope.row)">进入管理</el-button>
              <!-- <el-button  type="text" @click="deleteFirm(scope.row)" class="default-button danger">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination @change="pageChange" :total="total" />
    <el-dialog :visible.sync="showTypes" title="添加类型" width="50%" append-to-body :before-close="cancel">
      <el-form :model="typeForm" ref="form" label-width="100px" size="small" label-position="right">
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="组织名称" prop="enterpriseName" :rules="{required: true, message: '组织名称不能为空', trigger: 'blur'}">
              <el-input  v-model="typeForm.enterpriseName"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织类型" prop="enterpriseType" :rules="{required: true, message: '组织类型不能为空', trigger: 'blur'}">
              <el-select v-model="typeForm.enterpriseType" clearable >
                <el-option v-for="item in organizeList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取消</el-button>
        <el-button size="mini" type="primary" @click="save('form')">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//状态  0, "删除" 1, "正常  3, "注销 关闭" 4, "未通过",  5：草稿
import * as Port from "../../api";
import { requestTips,askDialog } from "../../assets/util"
import { getMenuList } from '@/api';
export default {
  data() {
    return {
      typeForm:{
        enterpriseName:null,
        enterpriseType:null
      },
      showTypes:false,
      showAll:false,
      downTitle:'更多搜索',
      searchParams: {
        enterpriseName: '',
        enterpriseType: '',
        enterpriseManager: '',
        enterpriseManagerPhone: '',
        status: '',
        setUpFirstDate: '',
        setUpLastDate: '',
      },
      organizeList:[
        {primaryKey:1,name:"企业"},
        {primaryKey:2,name:"团队"}
      ],
      statusList:[
        {primaryKey:1,name:"已开通"},
        {primaryKey:3,name:"已关闭"},
        {primaryKey:4,name:"未通过"},
        {primaryKey:5,name:"草稿"}
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData:[],
      pickerOptions:{
        disabledDate:(time)=>  {
          if (this.searchParams.setUpFirstDate) {
            return time.getTime() < this.searchParams.setUpFirstDate;
          }
        },
      },
      pickerOptionsStart:{
        disabledDate:(time)=>  {
          if (this.searchParams.setUpLastDate) {
            return time.getTime() > this.searchParams.setUpLastDate;
          }
        },
      },
      menuId: ''
    };
  },
  created() {
    this.menuId = this.$route.query.menuId
  },

  mounted() {
    this.getTableData()
  },

  methods: {
    //table数据源
    async getTableData(type) {
        let res = await Port.apiEnterpriseList({
            pageSize:this.pageSize,
            currentPage:type ? this.currentPage : 1,
            enterpriseName:this.searchParams.enterpriseName || null,
            enterpriseType:this.searchParams.enterpriseType || null,
            enterpriseManager:this.searchParams.enterpriseManager || null,
            enterpriseManagerPhone:this.searchParams.enterpriseManagerPhone || null,
            status:this.searchParams.status || null,
            setUpFirstDate:this.searchParams.setUpFirstDate || null,
            setUpLastDate:this.searchParams.setUpLastDate || null
        })
        this.tableData = res.rows || []
        this.total = res.total || 0
    },
    //进入详情
    async toInfo(item){
      if(!item){
        this.showTypes = true
      }else{
        this.getDetails(item)
      }
    },
    async save(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await Port.apiEnterpriseAdd(this.typeForm)
          this.getDetails({
            key:res.key
          })
          this.getTableData()
          this.$message.success('添加成功！')
          this.cancel()
        }
      });
    },
    async getDetails(item){
      let res = await getMenuList({
        parentId: this.menuId,
        isSso: false,
        typeList: ['normal', 'redirect'],
      });

      let menuUrl = res.rows[0].menuUrl;
      let separator = menuUrl.indexOf('?') > -1 ? '&' : '?';
      let queryData = {
        isRefresh: true,
        parentMenuId: this.menuId,
        menuId: res.rows[0].primaryKey,
        enterpriseid: item.key,
        key: item.key,
        isAdd: item.key ? 1 : 0,
        from:'project'
      };

      let paramData = [];
      for (let key in queryData) {
        paramData.push(key + '=' + queryData[key]);
      }

      let href = menuUrl + separator + paramData.join('&');
      window.open(href);
    },
   
    //分页
    pageChange(e) {
      this.currentPage = e.currentPage;
      this.pageSize = e.pageSize;
      this.getTableData("more");
    },
    // 单元格的 style 的回调方法
    cellStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
            return `padding-left:20px;`;
        }
    },

    // 表头行的 style 的回调方法
    headCellStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 && rowIndex === 0) {
            return `padding-left:20px;`;
        }
    },
    clickMore () {
      this.showAll = !this.showAll
      this.downTitle = this.showAll ? '收起' : '更多搜索'
    },
    cancel(){
      this.showTypes = false
      Object.keys(this.typeForm).forEach(key => this.typeForm[key]=null);
    }
  },
};
</script>
<style lang="scss" scoped>
.limit-home{
  .limit-search{
    padding:20px;
  }
  .more-serach{
    text-align: center;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    padding-top: 5px;
  }
    .top-search-box{
        padding: 16px;
    }
    ::v-deep .flex-col-item{
        .el-form-item__content{
            display: flex;
        }
    }
    .table-tips{
        font-size: 16px;
        font-weight: 800;
        padding: 0 0 25px 30px;
    }
}
</style>